<style>
  .el-input__inner{
    height: 30px !important;
    line-height: 30px !important;
  }
  .el-icon-date,.el-input__icon{
    line-height: 30px !important;
  }
</style>
<template>
  <div class="payment">
    <div class="top">
      <conHeader></conHeader>
    </div>
    <div class="content">
      <div class="search">
        <div class="search_con">
          <div class="sc_title">下单时间</div>
          <div class="sc_con">
            <div class="time">
              <el-date-picker
                v-model="startTime"
                type="datetime"
                placeholder="选择开始时间">
              </el-date-picker>
            </div>
            <div class="time_title">至</div>
            <div class="time">
              <el-date-picker
                v-model="endTime"
                type="datetime"
                placeholder="选择结束时间">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="search_con">
          <div class="sc_title">收款方式</div>
          <div class="sc_con">
            <div class="radios">
              <div class="radio">
                <el-checkbox v-model="paymentMethod_1" label="微信" border size="mini"></el-checkbox>
              </div>
              <div class="radio">
                <el-checkbox v-model="paymentMethod_2" label="支付宝" border size="mini"></el-checkbox>
              </div>
            </div>
          </div>
        </div>
        <div class="search_con">
          <div class="sc_title">状态</div>
          <div class="sc_con">
            <div class="radios">
              <div class="radio">
                <el-checkbox v-model="payStatus_1" label="已支付" border size="mini"></el-checkbox>
              </div>
              <div class="radio">
                <el-checkbox v-model="payStatus_2" label="待支付" border size="mini"></el-checkbox>
              </div>
              <div class="radio">
                <el-checkbox v-model="payStatus_3" label="支付失败" border size="mini"></el-checkbox>
              </div>
              <div class="radio">
                <el-checkbox v-model="payStatus_4" label="已退款" border size="mini"></el-checkbox>
              </div>
              <div class="radio" style="margin-left: 10px">
                <el-button type="success" style="padding-top: 0;line-height: 30px" @click="searchList">查询</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <div class="tab_top">
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              prop="nonce_str"
              label="云收款单号"
              width="210"
              align="center">
            </el-table-column>
            <el-table-column
              label="收款方式"
              width="80"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.order_type == 0">微信</span>
                <span v-if="scope.row.order_type == 1">支付宝</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="total_fee"
              label="金额"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="下单时间"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="time_end"
              label="到账时间"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              label="状态"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.pay_status == 0">待支付</span>
                <span v-if="scope.row.pay_status == 1">已支付</span>
                <span v-if="scope.row.pay_status == 2">支付失败</span>
                <span v-if="scope.row.pay_status == 3">已退款</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tab_bottom">
          <div class="tb_left">
            <div class="tbl_con">收款合计：{{total_receivables}}</div>
            <div class="tbl_con">微信收款：{{weChat_receivables}}</div>
            <div class="tbl_con">支付宝收款：{{alipay_receivables}}</div>
          </div>
          <div class="tb_right">
            <el-pagination
              :page-size="pageSize"
              :pager-count="11"
              layout="prev, pager, next"
              :total="totalNum">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import conHeader from '../assembly/conHeader'
  export default {
    name: "payment",
    components: {
      conHeader,
    },
    data() {
      return {
        startTime:'', //筛选开始时间
        endTime:'', //筛选结束时间
        paymentMethod_1:true, //收款方式-微信
        paymentMethod_2:true, //收款方式-支付宝
        payStatus_1:true, //状态-已支付
        payStatus_2:true, //状态-待支付
        payStatus_3:true, //状态-支付失败
        payStatus_4:true, //状态-已退款
        page:1, //分页页码
        pageSize:10, //每页显示条数
        totalNum:0, //总条数
        total_receivables:0, //总收款
        weChat_receivables:0, //微信收款
        alipay_receivables:0, //支付宝收款
        loading:false,
        tableData: []
      }
    },
    created() {
      let self = this
      self.searchList()
    },
    mounted() {
    },
    methods:{
      searchList(){
        let self = this
        let orderType = []
        let pay_status = []
        //orderType:0微信，1支付宝
        if (self.paymentMethod_1){
          orderType.push(0)
        }
        if (self.paymentMethod_2){
          orderType.push(1)
        }
        //pay_status:0等待支付，1已付款，2付款失败，3已退款
        if (self.payStatus_1){
          pay_status.push(1)
        }
        if (self.payStatus_2){
          pay_status.push(0)
        }
        if (self.payStatus_3){
          pay_status.push(2)
        }
        if (self.payStatus_4){
          pay_status.push(3)
        }
        self.loading = true
        self.$http.post(self.conURL + 'hotel/hotel/weixinpaylist',{
          order_type:orderType,
          pay_status:pay_status,
          start_time:self.startTime,
          end_time:self.endTime,
          page:self.page,
          pageSize:self.pageSize
        }).then(res => {
          if (res.data.code == 0){
            self.totalNum = res.data.data.list.total
            self.tableData = res.data.data.list.data
            self.total_receivables = res.data.data.sum.sum_total
            self.weChat_receivables = res.data.data.sum.sum_weixin_total
            self.alipay_receivables = res.data.data.sum.sum_alipay_total
          }else {
            self.createMess(res.data.msg)
          }
        })
        self.loading = false
      },
      //接口请求失败，提示信息0
      createMess(msg){
        this.$notify.error({
          title: '错误',
          message: msg
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  page{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .payment{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    .content{
      width: 100%;
      height: 100%;
      padding-top: 48px;
      .search{
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        .search_con{
          display: flex;
          flex-direction: row;
          margin-top: 10px;
          .sc_title{
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-right: 10px;
          }
          .sc_con{
            height: 30px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            .time{
              height: 30px;
              line-height: 30px;
              margin-left: 5px;
            }
            .time:first-child{
              margin-left: 0;
            }
            .time_title{
              font-size: 16px;
              line-height: 30px;
              margin-left: 5px;
            }
            .radios{
              display: flex;
              flex-direction: row;
              height: 30px;
              .radio{
                height: 30px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 5px;
              }
              .radio:first-child{
                margin-left: 0;
              }
            }
          }
        }
        .search_con:first-child{
          margin-top: 0;
        }
      }
      .tab{
        padding: 15px;
        display: flex;
        flex-direction: column;
        .tab_bottom{
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .tb_left{
            display: flex;
            flex-direction: row;
            .tbl_con{
              margin-left: 10px;
              font-size: 14px;
            }
            .tbl_con:first-child{
              margin-left: 0;
            }
          }
        }
      }
    }
  }
</style>
